<template>
	<view class="container">
		<!-- F1:顶部搜索栏 -->
		<view class="f1">
			<!-- 左侧:汉堡包按钮 -->
			<uni-icons @click="showDrawer" type="bars" color="#fff" size="60rpx"></uni-icons>
			<!-- 中间:输入框组 -->
			<view class="input-group">
				<input type="text" placeholder="商品搜索">
				<image src="../../static/img/img/logo-s.png" mode="widthFix"></image>
				<uni-icons disabled @click="goToSearch" class="search" type="search" size="45rpx" color="#666">
				</uni-icons>
			</view>
			<!-- 右侧:登录按钮 -->
			<navigator url="../userCenter/userCenter" open-type="switchTab">登录</navigator>
		</view>
		<!-- F2:轮播广告 -->
		<!-- F3:首页推荐 -->
		<!-- F4:最新上架 -->
		<!-- F5:热销单品 -->
		<!-- F6:页尾 -->
		<xzFooter></xzFooter>
		<!-- F7:返回顶部 -->
		<xzGoTop></xzGoTop>
		<!-- F8:汉堡包按钮弹出的抽屉(菜单) -->
		<uni-drawer ref="drawerMenu">
			<view class="" style="padding: 30rpx;">
				<!-- link:①指定跳转方式 ②添加向右的箭头 ③增加点击反馈(背景色变深) -->
				<uni-list>
					<uni-list-item title="登录" to="/pages/userCenter/userCenter" link="switchTab"></uni-list-item>
					<uni-list-item title="注册" to="/pages/userCenter/userCenter" link="switchTab"></uni-list-item>
					<uni-list-item title="品牌馆" to="/pages/brands/brands" link="switchTab"></uni-list-item>
					<uni-list-item title="商品分类" to="/pages/category/category" link="switchTab"></uni-list-item>
					<uni-list-item title="商品搜索" to="/pages/search/search" link=""></uni-list-item>
					<uni-list-item title="在线客服" to="/pages/chatroom/chatroom" link=""></uni-list-item>
				</uni-list>
				<button @click="closeDrawer" type="default" size="mini">关闭</button>
			</view>
		</uni-drawer>
	</view>
</template>

<script>
	export default {
		async onLoad(){
			console.log('.....首页挂载完成....')
			/***********向服务器端数据API发起GET异步请求,获取首页数据*********/
			//let url = 'https://www.codeboy.com/xuezi/data/product/index.php'
			// let x = uni.request({url})
			// console.log(x)
			//let [err,res] = await uni.request({url})
			//如果异步请求失败,err是一个对象,否则是一个null
			//console.log(res.data)  //响应消息主体
			
			/***********向服务器端数据API发起POST异步请求,获取首页数据*********/
			//给用户一些友好的提示:加载中,请稍后...
			uni.showLoading({
				title:'数据加载中...'
			})
			//////////////////////////////////////
			let url = 'https://web.codeboy.com/xuezi/data/user/login.php'
			let [err,res] = await uni.request({
				url,
				method:'POST',
				header:{'Content-Type':'application/x-www-form-urlencoded'},
				data:{uname:'yaya',upwd:'123456'}//次数的对象会被uni.request中的修改为Content-Type要求的数据格式
			})
			console.log(res)
			//隐藏"加载中"的提示框
			uni.hideLoading()
		},
		methods: {
			goToSearch() {
				//导航跳转
				uni.navigateTo({
					url: '/pages/search/search'
				})
			},
			showDrawer() {
				this.$refs.drawerMenu.open();
			},
			closeDrawer() {
				this.$refs.drawerMenu.close();
			}
		},
	}
</script>

<style lang="scss">
	.container {
		//渐变的背景色 -- 不是背景色而是背景图片
		background-image: linear-gradient(180deg, $uni-color-primary 100rpx, $uni-bg-color 500rpx);
	}

	.f1 {
		padding-top: $uni-spacing-col-lg * 3;
		padding-bottom: $uni-spacing-col-lg;
		padding-left: $uni-spacing-row-lg;
		padding-right: $uni-spacing-row-lg;
		//弹性容器主轴方向:横向
		flex-direction: row;
		//弹性容器交叉轴上对齐方式:居中
		align-items: center;

		.input-group {
			//弹性子元素宽度增长权重:1
			flex: 1;
			margin: 0 $uni-spacing-row-base;
			position: relative;

			input {
				background-color: $uni-text-color-inverse;
				// line-height: 100rpx !important;//此处无效
				height: $uni-font-size-base * 2.4;
				border-radius: $uni-font-size-base * 1.2;
				text-align: center;
			}

			image {
				width: $uni-font-size-base * 1.4;
				position: absolute;
				left: $uni-spacing-row-base;
				top: 50%;
				transform: translateY(-50%);
			}

			.search {
				position: absolute;
				right: $uni-spacing-row-lg;
				top: 50%;
				transform: translateY(-50%);
			}
		}

		navigator {
			color: $uni-text-color-inverse;
		}
	}
</style>
